<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Hello VuePress (演示页面)</title>
    <meta name="generator" content="VuePress 1.9.7">
    
    <meta name="description" content="">
    
    <link rel="preload" href="/mini-sandbox/assets/css/0.styles.10f92ad5.css" as="style"><link rel="preload" href="/mini-sandbox/assets/js/app.e355fb7a.js" as="script"><link rel="preload" href="/mini-sandbox/assets/js/2.23b65d14.js" as="script"><link rel="preload" href="/mini-sandbox/assets/js/7.c6a78629.js" as="script"><link rel="prefetch" href="/mini-sandbox/assets/js/3.9432e8e5.js"><link rel="prefetch" href="/mini-sandbox/assets/js/4.3557a5bc.js"><link rel="prefetch" href="/mini-sandbox/assets/js/5.ee0ad71c.js"><link rel="prefetch" href="/mini-sandbox/assets/js/6.bce6a16a.js"><link rel="prefetch" href="/mini-sandbox/assets/js/8.8f379992.js">
    <link rel="stylesheet" href="/mini-sandbox/assets/css/0.styles.10f92ad5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/mini-sandbox/" aria-current="page" class="home-link router-link-exact-active router-link-active"></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="hello-vuepress-演示页面"><a href="#hello-vuepress-演示页面" class="header-anchor">#</a> Hello VuePress (演示页面)</h1> <div class="custom-block tip"><p class="custom-block-title">提示</p> <ul><li><a href="https://github.com/buuing/mini-sandbox" target="_blank" rel="noopener noreferrer">github 仓库<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>这是个临时演示页面, 后续会进行迁移, 想持续关注的, 可以在 github 上点个 star 支持一下</p></div> <h2 id="痛点"><a href="#痛点" class="header-anchor">#</a> 痛点</h2> <p>以往大家在<code>markdown</code>里书写代码块的时候, 通常会使用下面这种方式</p> <div class="language-html extra-class"><pre class="language-html"><code>```html
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">border</span><span class="token punctuation">:</span> 1px solid red</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>这是一个盒子<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
```
</code></pre></div> <p>虽然这样可以清晰的展示代码结构, 却无法<code>动态渲染</code>效果和<code>调试代码</code>.</p> <p>即便是有<code>codepen</code>这样的工具, 可以通过嵌入 iframe 来使用, 但国内访问网速慢是他最大的痛点</p> <h2 id="解决方案"><a href="#解决方案" class="header-anchor">#</a> 解决方案</h2> <p>为了解决这个问题, 我在<code>vuepress</code>里集成了<code>Mini-Sandbox</code>, 引入插件即可实现代码的<code>在线编辑</code>和<code>实时渲染</code></p> <div><div data-type="html" data-filename="index.html" data-config="undefined" data-sandbox-options="{}" data-value="PGRpdiBzdHlsZT0iYm9yZGVyOiAxcHggc29saWQgcmVkIj7ov5nmmK/kuIDkuKrnm5LlrZA8L2Rpdj4K" class="mini-sandbox-vuepress"></div></div> <ul><li>并且你会发现, 该插件并没有任何使用负担, 在保留了 md 语法的同时, 我扩展了更高级的功能</li></ul> <div class="language-html extra-class"><pre class="language-html"><code>```html [index.html]
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">border</span><span class="token punctuation">:</span> 1px solid red</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>这是一个盒子<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
```
</code></pre></div> <h2 id="其他示例"><a href="#其他示例" class="header-anchor">#</a> 其他示例</h2> <p>没错, 你左侧编辑代码, 右侧也会实时渲染</p> <div><div data-type="html" data-filename="index.html" data-config="undefined" data-sandbox-options="{}" data-value="PHN0eWxlPgogIGgyIHsKICAgIGNvbG9yOiByZWQ7CiAgfQo8L3N0eWxlPgoKPGRpdj4KICA8aDI+6L+Z5piv5LiA5LiqIERlbW88L2gyPgogIDxidXR0b24gaWQ9ImJ0biI+54K55Ye7IDA8L2J1dHRvbj4KPC9kaXY+Cgo8c2NyaXB0PgogIGxldCBudW0gPSAxCiAgY29uc3QgYnRuID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2J0bicpCiAgYnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZSA9PiB7CiAgICBidG4uaW5uZXJIVE1MID0gJ+eCueWHuyAnICsgbnVtKysKICB9KQo8L3NjcmlwdD4K" class="mini-sandbox-vuepress"></div></div> <div class="language-html extra-class"><pre class="language-html"><code>```html [index.html]
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">h2</span> <span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>这是一个 Demo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击 0<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">1</span>
  <span class="token keyword">const</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#btn'</span><span class="token punctuation">)</span>
  btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    btn<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'点击 '</span> <span class="token operator">+</span> num<span class="token operator">++</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span>
</span>```</code></pre></div> <h2 id="自问自答"><a href="#自问自答" class="header-anchor">#</a> 自问自答</h2> <ul><li><p>就这么简单吗, 只能渲染个 html ?</p> <ul><li>不止于 HTML , 还支持 <a href="https://buuing.github.io/mini-sandbox/vue-sfc.html" target="_blank" rel="noopener noreferrer">Vue SFC<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://buuing.github.io/mini-sandbox/react-sfc.html" target="_blank" rel="noopener noreferrer">React SFC<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li><p>如果我一个页面放很多 Sandbox 会不会很卡</p> <ul><li>不会的, 因为多个 Sandbox 之间相同的资源会自动缓存, 不会浪费多余的 http 请求</li></ul></li> <li><p>只能演示 <code>umd</code> / <code>iife</code> 格式的包吗</p> <ul><li>也可以用来演示 esm 模块, 比如 <a href="https://buuing.github.io/mini-sandbox/react-sfc.html" target="_blank" rel="noopener noreferrer">React SFC<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li><p>看上去似乎就是一个玩具?</p> <ul><li>可以用于博客演示代码片段, 比如你写了个 html/css 的小 demo, 或是 canvas / webgl 之类的特效</li> <li>也可以用于一些组件库的开发者, 让他们更好的展示自己组件的不用用法</li></ul></li> <li><p>我是 ts 狂热爱好者, 我想写 <code>React + TS</code> / <code>Vue + TS</code></p> <ul><li>关于 ts 支持等不忙的时候再进行探索, 暂时尚未支持</li></ul></li> <li><p>你这个 vue / react 组件能互相引用吗</p> <ul><li>还在开发测试中, 即将支持~</li></ul></li> <li><p>你的插件好像有 bug, 我想怼死你</p> <ul><li>请去 github 上提交 issues</li></ul></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/mini-sandbox/assets/js/app.e355fb7a.js" defer></script><script src="/mini-sandbox/assets/js/2.23b65d14.js" defer></script><script src="/mini-sandbox/assets/js/7.c6a78629.js" defer></script>
  </body>
</html>
